import "./index.scss";
import React, { useState } from "react";
import { Button, Input, Card, Avatar, Tooltip } from "antd";
import { EditOutlined, EllipsisOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
const { Meta } = Card;
const Home = () => {
  const [inputValue, setInputValue] = useState("");
  const navigate = useNavigate();
  const handleSearch = () => {
    console.log("点击查询", inputValue);
  };
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };
  const modelList = [
    {
      name: "Demo",
      appCode: "3857398172895431789",
      description: "这是一个demo",
      owner: "周杰伦",
      nsName: "测试name",
    },
    {
      name: "Demo",
      appCode: "4857398172895431789",
      description: "这是一个demo",
      owner: "吴彦祖",
      nsName: "测试name",
    },
  ];

  //   去详情
  const handleDetail = () => {
    navigate("/home/homeDetail");
  };

  // 使用for循环生成卡片
  // const cards = [];
  // for (let i = 0; i < modelList.length; i++) {
  //   const item = modelList[i];
  //   cards.push(
  //     <Card
  //       hoverable
  //       className="g-m-r-10"
  //       key={item.appCode}
  //       style={{
  //         width: 365,
  //         marginBottom: 20,
  //       }}
  //       actions={[
  //         <Tooltip title="编辑配置" onClick={handleDetail}>
  //           <EditOutlined />
  //         </Tooltip>,
  //         <Tooltip title="应用详情" onClick={handleDetail}>
  //           <EllipsisOutlined />
  //         </Tooltip>,
  //       ]}
  //     >
  //       <Meta
  //         avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${item.appCode}`} />}
  //         title={item.name}
  //         description={item.description}
  //       />
  //     </Card>
  //   );
  // }
  const Items = modelList.map((test) => {
    // console.log(test);
   return( <Card
    hoverable
    className="g-m-r-10"
    key={test.appCode}
    style={{
      width: 365,
      marginBottom: 20,
    }}
    actions={[
      <Tooltip title="编辑配置" onClick={handleDetail}>
        <EditOutlined />
      </Tooltip>,
      <Tooltip title="应用详情" onClick={handleDetail}>
        <EllipsisOutlined />
      </Tooltip>,
    ]}
  >
    <Meta
      avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${test.appCode}`} />}
      title={test.name}
      description={test.description}
    />
  </Card>)
  });
  return (
    <div className="g-bg-white g-pd-20 home">
      <div className="g-flex-ac">
        <div>
          <Input
            style={{ width: "240px" }}
            placeholder="请输入项目名称"
            value={inputValue}
            onChange={handleChange}
          />
        </div>
        <div>
          <Button
            style={{ background: "#3963d3" }}
            className="g-m-lr-10"
            type="primary"
            onClick={handleSearch}
          >
            查询
          </Button>
          <Button style={{ background: "#3963d3" }} type="primary">
            同步项目
          </Button>
        </div>
      </div>
      {/* <div className="g-m-t-20 g-flex-ac">{cards}</div> */}
      <div className="g-m-t-20 g-flex-ac">{Items}</div>
      <div className="g-m-t-20 g-flex-ac">

        {modelList.map((test) => (
         <Card
          hoverable
          className="g-m-r-10"
          key={test.appCode}
          style={{
            width: 365,
            marginBottom: 20,
          }}
          actions={[
            <Tooltip title="编辑配置" onClick={handleDetail}>
              <EditOutlined />
            </Tooltip>,
            <Tooltip title="应用详情" onClick={handleDetail}>
              <EllipsisOutlined />
            </Tooltip>,
          ]}
        >
          <Meta
            avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${test.appCode}`} />}
            title={test.name}
            description={test.description}
          />
        </Card>
        ))}
        </div>

    </div>
  );
};

export default Home;